<template>
    <div class="bread">

        <el-breadcrumb :separator="isShowBread ? '/' : ''">

            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item v-show="isShowBread" v-for="r in route.matched" :key="r.path" :to="{
                path: r.path
            }">{{ r.meta.title }}
            </el-breadcrumb-item>
        </el-breadcrumb>
    </div>
</template>
  
<script setup lang="ts">
import { ref, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
const route = useRoute();
// 获取路由的跳转路径
const router = useRouter();

// 控制面包屑为login时候二级路由出现
const isShowBread = ref(false)


watch(() => route.path, (newValue, oldValue) => {
    // console.log(newValue);
    // console.log(route.matched);
    // console.log(newValue);

    if (route.matched.length !== 2 || route.path !== "/index") {
        isShowBread.value = true
        return
    }
    isShowBread.value = false
});

</script>
  
<style scoped>
.bread {
    padding-bottom: 20px;
}
</style>
  